@primary-color: #184576;
.route {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0 10px 0;
  margin-bottom: 24px;

  .left {
    display: flex;
    justify-content: center;
    align-items: center;

    .back {
      font-size: 32px;
      margin-right: 12px;
      cursor: pointer;
    }

    .back img {
      width: 32px;
      height: 32px;
      cursor: pointer;
    }
  }

  .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: .5;

    .search {
      font-size: 14px;
      cursor: pointer;
      margin-right: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bolder;
      color: @primary-color;

      .search-pre {
        margin-right: 8px;
        font-size: 14px;
      }

      .search-after {
        margin-left: 8px;
        font-size: 12px;
      }
    }

    .capsule {
      animation: capsule 3s;
    }

    .shake {
      animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      perspective: 1000px;
    }

    @keyframes capsule {
      0%, 25% {
        width: 32px;
        color: @primary-color;
        font-size: 0;
      }

      50% {
        width: 86.2px;
        color: @primary-color;
        font-size: 0px;
      }

      51% {
        font-size: 16px;
      }

      100% {
        width: 86.2px;
        color: #fff;
        font-size: 16px;
      }
    }

    @keyframes shake {
      10%, 90% {
        transform: translate3d(-1px, 0, 0);
      }

      20%, 80% {
        transform: translate3d(2px, 0, 0);
      }

      30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
      }

      40%, 60% {
        transform: translate3d(4px, 0, 0);
      }
    }
  }
}